<template>
  <div
    :class="`mobile_nav  ${showNav ? 'ani_right' : ''}`"
    v-for="(item, index) in childNavList"
    :key="item.id"
  >
    <div
      :class="{
        nav_title: true,
        isActive: item.ids.includes(select || 'default'),
      }"
      @click="() => clickItem(item, index)"
    >
      <span :class="`title first_mobile_${level}`"
        ><span class="number"> {{ level == 1 ? `0${index + 1}` : "" }} </span>
        <span>{{ item.name }}</span></span
      >
      <span
        v-if="item.children && item.children.length > 0"
        :class="`arrow_svg ${item.showChild ? 'arrow_active' : ''}`"
      >
        <svg
          viewBox="0 0 16.0642 16.0738"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <defs>
            <clipPath id="clip12_156">
              <rect
                id="箭头"
                width="16.073816"
                height="16.064178"
                transform="translate(0.000000 16.073792) rotate(-90.000000)"
              />
            </clipPath>
          </defs>
          <g clip-path="url(#clip12_156)">
            <path
              id="path"
              d="M1.3335 2.23865L14.7227 2.23865C15.3016 2.23517 15.7097 2.49768 15.947 3.02606C16.1843 3.5545 16.1094 4.03412 15.7223 4.4649L9.10168 13.3053C8.87976 13.5995 8.58643 13.7725 8.22168 13.8242C7.85693 13.8758 7.52722 13.7911 7.23242 13.5701C7.12988 13.4961 7.04175 13.4078 6.96777 13.3053L0.263672 4.37C0.0435791 4.0752 -0.0402832 3.74561 0.0123291 3.38141C0.0649414 3.01715 0.238525 2.72479 0.532959 2.50439C0.768188 2.32361 1.03687 2.23755 1.3335 2.23865Z"
              fill-rule="nonzero"
              fill="grey"
            />
          </g>
        </svg>
      </span>
    </div>
    <div
      v-if="item.children && item.children.length > 0"
      :class="{
        item_child: true,
      }"
      :id="itemId(item.id)"
      :style="{
        paddingLeft: (level == 1 ? 2.8 : level) * 10 + 'px',
        overflow: 'hidden',
      }"
    >
      <MobileNavItem
        :select="select"
        @itemClick="clickItem"
        :level="level + 1"
        :navList="item.children"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import gsap from "gsap";
const itemId = (id: string) => {
  return `mobile_${id}`;
};
const props = defineProps({
  select: String,
  // selectModifiers: Object, // 和父组件的对应
  showNav: {
    type: Boolean,
    default: false,
  },
  navList: {
    type: Array<any>,
    default:() => [],
  },
  level: {
    type: Number,
    default: 1,
  },
  parentId: {
    type: String,
    default: "0",
  },
});
const navAnimation = () => {
  const tl = gsap.timeline({
    delay: 0.2,
  });
  Array.from(document.querySelectorAll(".first_mobile_1")).forEach(
    (it, index) => {
      if (it) {
        gsap.fromTo(
          it,
          {
            opacity: 0,
            x: 100,
          },
          {
            opacity: 1,
            x: 0,
            duration: 1,
            delay: index / 5,
          }
        );
      }
    }
  );
};
watch(
  () => props.showNav,
  (nv) => {
    if (nv) {
      // navAnimation();
    }
  },
  {
    immediate: true,
  }
);
const arrowClick = (id: string, item: any, index: number) => {
  const el = document.getElementById(id);
  if (item.showChild) {
    // 如果展开直接关闭
    childNavList.value[index].showChild = false;
    gsap.to(el, {
      height: 0,
    });
  } else {
    props.navList.forEach((it, idx) => {
      // 因为是组件递归展示，所以这个每次都是上一级的数据
      const dom = document.getElementById(itemId(it.id)); //
      if (dom) {
        if (id != itemId(it.id)) {
          // 这个可以保证每次只展开一个
          childNavList.value[idx].showChild = false;
          gsap.to(dom, {
            height: "0px",
          });
        } else {
          gsap.to(dom, {
            height: "auto",
          });
          childNavList.value[index].showChild = true;
        }
      }
    });
  }
};

const childNavList = toRef(JSON.parse(JSON.stringify(props.navList)));

const emits = defineEmits(["itemClick", "update:select"]);
const clickItem = (item: any, idx: number) => {
  if (item.children && item.children.length > 0) {
    arrowClick(itemId(item.id), item, idx);
  } else {
    emits("itemClick", item);
    emits("update:select", item.id);
  }
};
onMounted(() => {
  if (window) {
    childNavList.value.forEach((it: any, index: number) => {
      if (props.select && it.ids.includes(props.select)) {
        arrowClick(itemId(it.id), it, index);
      }
    });
  }
});
</script>
<script lang="ts">
export default {
  name: "MobileNavItem",
};
</script>
<style lang="scss">
@keyframes mobile_right_nav {
  0% {
    transform: translate(130px, 0%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0%);
    opacity: 1;
  }
}
.mobile_nav {
  font-size: 14px;
  .isActive {
    color: blue;
  }
  .number {
    color: rgb(214, 213, 213);
    font-size: 16px;
    margin-right: 4px;
  }
  .nav_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background-color: white;
    border-bottom: 1px solid rgb(218, 215, 215);
  }
  .item_child {
    background-color: white;
    height: 0;
  }
  .arrow_svg {
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    svg {
      width: 10px;
      height: 10px;
      fill: rgb(183, 172, 172);
    }
    &.arrow_active {
      transform: rotate(180deg);
    }
  }
}
</style>
